﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="js/jquery.js"></script>
    <script src="js/echarts.js"></script>
    <script src="js/echarts-gl.js"></script>

    <script src="js/simplex-noise.js"></script>
    <script src="js/Jquery.Common.js"></script>
    <style type="text/css">
        body {
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script type="text/javascript">
        var myEchars = { HouseList: [], unit: "", buildingName: [], floorNo: 0, Color: [] };
        myEchars.zid = queryString("zid");
        function queryString(val) {
            var uri = window.location.search;
            var re = new RegExp("[\?\&]" + val + "\=([^\&\?]*)", "i");
            var arr = uri.match(re);
            return (!!arr ? unescape(arr[1]) : null);
        }

        function generateData(FloorNo) {
            var arrData = [];
            var match = Common.query(myEchars.HouseList, '@FNo=' + FloorNo + '');
            for (var i = 0; i < match.length; i++) {
                arrData.push({
                    houseId: match[i].ID, name: match[i].FloorHouseNo,
                    predictedInnerArea: match[i].PredictedInnerArea,
                    predictedBuildingArea: match[i].PredictedBuildingArea,
                    predictedShareArea: match[i].PredictedShareArea, value: [i, 0, 1]
                });
            }
            return arrData;
        }

        function getUnitName() {
            var result = [];
            $.ajax({
                type: "post",
                dataType: "json",
                contentType: "application/json",
                data: '',
                async: false,
                url: "Ashx/AjaxGetUnitName.ashx?zid=" + myEchars.zid,
                success: function (data) {
                    if (!!data) {
                        result = data;
                    }
                },
                error: function (data) {
                    alert(data.responseText);
                }
            });
            return result;
        }

        function getBuildingName() {
            var result = [];
            $.ajax({
                type: "post",
                dataType: "json",
                contentType: "application/json",
                data: '',
                async: false,
                url: "Ashx/AjaxGetBuildingName.ashx?zid=" + myEchars.zid,
                success: function (data) {
                    if (!!data) {
                        myEchars.floorNo = data.floorNo;
                        result.push(data.buildingName);
                    }
                },
                error: function (data) {
                    alert(data.responseText);
                }
            });
            return result;
        }

        function getHouseInfoList() {
            var result = [];
            $.ajax({
                type: "post",
                dataType: "json",
                contentType: "application/json",
                data: '',
                async: false,
                url: "Ashx/AjaxGetHouseInfo.ashx?zid=" + myEchars.zid,
                success: function (data) {
                    if (!!data) {
                        result = data;
                    }
                },
                error: function (data) {
                    alert(data.responseText);
                }
            });
            return result;
        }

        function getColor() {
            var myColor = [];
            for (var i = 0; i < 40; i++) {
                myColor.push('#313695');
            }
            //color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
            return myColor;
        }

        $(function () {
            if (!myEchars.zid || myEchars.zid == "") {
                alert("参数zid为空");
                return;
            }
            // 基于准备好的dom，初始化echarts实例
            $("#main").width($(window).width()).height($(window).height());
            var myChart = echarts.init(document.getElementById('main'));
            myEchars.unit = getUnitName();
            myEchars.buildingName = getBuildingName();
            myEchars.HouseList = getHouseInfoList();
            myEchars.Color = getColor();
            var series = [];
            for (var i = 0; i < myEchars.floorNo; i++) {
                series.push({
                    id: i,
                    name: "单元名称" + i,
                    type: 'bar3D',
                    data: generateData((i + 1).toString()),
                    stack: 'stack',
                    shading: 'lambert',
                    itemStyle: {
                        color: '#01A1DB',
                        opacity: 0.8
                    },
                    emphasis: {
                        label: {
                            show: true,
                            distance: -10
                            , formatter: function (params) {
                                return params.name;
                            },
                            textStyle: {
                                fontSize: 20,
                                fontWeight: "bold"
                            }
                        }
                    },
                    label: {
                        show: true,
                        distance: -10,
                        formatter: function (params) {
                            return params.name;
                        },
                        textStyle: {
                            fontSize: 18
                        }
                    }
                });
            }
            option = {
                tooltip: {
                    triggerOn: "mousemove", enterable: false, position: function (point, params, dom, rect, size) {

                    }, formatter: function (params) {
                        return "房间号：" + params.name
                            + "<br/>预测套内面积：" + params.data.predictedInnerArea + " ㎡"
                            + "<br/>预测建筑面积：" + params.data.predictedBuildingArea + " ㎡"
                            + "<br/>预测分摊面积：" + params.data.predictedShareArea + " ㎡";
                    }, borderColor: "#ff0000"
                },
                visualMap: {
                    max: 40,
                    inRange: {
                        color: myEchars.Color
                        //color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                    }
                },
                xAxis3D: {
                    name: "",
                    type: 'category',
                    data: myEchars.unit
                },
                yAxis3D: {
                    name: "",
                    type: 'category',
                    data: myEchars.buildingName
                },
                zAxis3D: {
                    name: "层数",
                    type: 'value'
                },
                grid3D: {
                    environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0, color: '#00aaff' // 天空颜色
                    }, {
                        offset: 0.7, color: '#998866' // 地面颜色
                    }, {
                        offset: 1, color: '#998866' // 地面颜色
                    }], false),
                    boxWidth: 220,
                    boxDepth: 50,
                    light: {
                        main: {
                            intensity: 1.2
                        },
                        ambient: {
                            intensity: 0.3
                        }
                    },
                    viewControl: {
                        distance: 220,
                        autoRotate: false//是否开启视角绕物体的自动旋转查看
                    }
                },
                series: series
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

            myChart.on('click', function (params) {
                window.open("Demo4.html?id=" + params.data.houseId);
            });
        });
    </script>

</head>
<body>
    <!--<h1>三维楼盘表</h1>-->
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main"></div>
</body>
</html>
